<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>动画</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: #000000;
        }
        .div{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 100px 200px;
        }
        .div1{
            animation: animation 4s ease,div2 4s 0.1s ease;
        }
        @keyframes animation {
            0%{
                transform: translateY(-200%);
            }
            12.5%{
                transform: translateY(100%);
            }
            25%{
                transform: translateY(-50%);
            }
            37.5%{
                transform: translateY(25%);
            }
            50%{
                transform: translateY(-12.5%);
            }
            62.5%{
                transform: translateY(6.25%);
            }
            75%{
                transform: translateY(-3.125%);
            }
            87.5%{
                transform: translateY(1.56%);
            }
            100%{
                transform: translateY(0%);
            }
        }
        .div2{
            animation-name: div2;
            animation-delay: 4s;
            animation-duration: 3s;
            animation-direction: normal;
            animation-timing-function: ease;
        }
        @keyframes div2 {
            0%{
                transform:translateX(0)
            }
            50%{
                background-color: #16a085;
                transform:translateX(1000px)
            }
            100%{
                background-color: #ffcc00;
                transform:translateX(0)
            }
        }
        .div3{
            border-radius: 50%;
            animation: div3 1.5s linear infinite;
        }
        @keyframes div3 {
            from{
                opacity: 1;
                transform: scale(0,0);
            }
            to{
                opacity: 0;
                transform: scale(1,1);
            }
        }
        .div-box{
            width: 200px;
            height: 200px;
            border-radius: 50%;
            position: relative;
        }
        .div-1{
            width: 200px;
            height: 200px;
            position: absolute;
            background-color: rgba(219,245,3,1);
            border-radius: 50%;
            animation: div-1 2s -1s linear infinite;
        }
        @keyframes div-1 {
            0%{
                opacity: 0.8;
                transform: scale(0,0);
            }
            100%{
                opacity: 0;
                transform: scale(1,1);
            }
        }
        .div-2{
            width: 200px;
            height: 200px;
            position: absolute;
            background-color: rgba(219,245,3,1);
            border-radius: 50%;
            animation: div-2 2s linear infinite;
        }
        @keyframes div-2 {
            0%{
                opacity: 0.8;
                transform: scale(0,0);
            }
            100%{
                opacity: 0;
                transform: scale(1,1);
            }
        }
        .test1{
            width: 200px;
            height: 200px;
            background: url("../image/img8.png");
            transition: all 0.3s linear;
            -webkit-transform:perspective(400px) rotateY(0deg);
        }
        .test1:hover{
            -webkit-transform:perspective(400px) rotateY(35deg);
        }
        .test2{
            -webkit-transform-origin:left center;
            animation:rotate 2s linear infinite;
        }
        @keyframes rotate {
            0% {-webkit-transform:perspective(400px) rotateY(0deg);}

            50% {visibility: hidden;}

            100% {-webkit-transform:perspective(400px) rotateY(360deg);}
        }
        .test3{
            width: 1000px;
            height: 200px;
        }
        .test3 div{
            float: left;
            width: 90px;
            height: 200px;
        }
        .test3:hover .left-in{
            animation: in-left 0.2s ease forwards;
        }
        .test3:hover .left-out{
            animation: out-left 0.2s 0.15s ease forwards;
        }
        .test3:hover .right-in{
            animation: in-right 0.2s ease forwards;
        }
        .test3:hover .right-out{
            animation: in-right 0.2s 0.15s ease forwards;
        }
        .test3 .left{
            -webkit-transform-origin:right center;
            -webkit-transform:perspective(800px) rotateY(270deg);
        }
        .test3 .right{
            -webkit-transform-origin:left center;
            -webkit-transform:perspective(800px) rotateY(90deg);
        }
        .test3 .out{
            background-color: #d9d9d9;
        }
        .test3 .in{
            background-color: #bbb;
        }
        .test3 .center{
            width: 200px;
            height: 200px;
            background-color: #ffffff;
            position: relative;
            z-index: 2;
        }
        .in-left{
            animation: in-left 0.2s ease forwards;
        }
        @keyframes in-left {
            0%{
                -webkit-transform:perspective(400px) rotateY(270deg);
            }
            20%{
            }
            100%{
                -webkit-transform:perspective(400px) rotateY(360deg);
            }
        }
        .out-left{
            animation: out-left 0.2s 0.25s ease forwards;
        }
        @keyframes out-left {
            0%{
                -webkit-transform:perspective(400px) rotateY(270deg);
            }
            20%{
            }
            100%{
                -webkit-transform:perspective(400px) rotateY(360deg);
            }
        }
        .in-right{
            animation: in-right 0.2s ease forwards;
        }
        @keyframes in-right {
            0%{
                -webkit-transform:perspective(400px) rotateY(90deg);
            }
            20%{
            }
            100%{
                -webkit-transform:perspective(400px) rotateY(0deg);
            }
        }
        .out-right{
            animation: out-right 0.2s 0.25s ease forwards;
        }
        @keyframes out-right {
            0%{
                -webkit-transform:perspective(400px) rotateY(270deg);
            }
            20%{
            }
            100%{
                -webkit-transform:perspective(400px) rotateY(360deg);
            }
        }
        .btn-box{
            width: 400px;
            height: 400px;
            background-color: #feb41d;
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 9;
            transform: translate(-50%,-50%);
        }
        @media (max-width: 400px){
            .btn-box{
                background-color: red;
                width: 100%;
            }
        }
        .my-btn{
            font-family:  "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;
            width: 80%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: #ffffff;
            border-left: 1px solid #eee;
            border-right: 1px solid #eee;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            cursor: pointer;
            transition: all 0.2s linear;

        }
        .my-btn:hover{
            border-color: rgba(0,0,0,0);
            padding: 0 20px;
        }
        .my-btn:hover:before{
            transform:translate(0,20px) rotate(45deg);
        }
        .my-btn:hover:after{
            transform:translate(0,-20px) rotate(-45deg);
        }
        .my-btn:before{
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 1px;
            background-color: #fff;
            transition: all 0.2s ease;
        }
        .my-btn:after{
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 1px;
            background-color: #fff;
            transition: all 0.2s ease;
        }
        .btn2-box{
            width: 250px;
            height: 250px;
            background-color: #16a085;
        }
        .btn2{
            width: 150px;
            height: 30px;
            color: #ffffff;
            border: 1px solid #ffffff;
            position: relative;
            cursor: pointer;
            overflow: hidden;
        }
        .btn2:hover .btn-bg{
            width: 300px;
            height: 300px;
            background-color: rgba(255,255,255,0.3);
        }
        .btn-bg{
            width: 0;
            height: 0;
            background-color: rgba(255,255,255,0.6);
            transition: all 0.6s ease-out;
            border-radius: 50%;
            position: absolute;
            left: -80px;
            top: -80px;
        }
        .btn2 p{
            position: absolute;
            width: 150px;
            line-height: 28px;
            text-align: center;
            transition: all 0.2s linear;
        }
        .btn2:hover .p1{
            left: 0;
        }
        .btn2:hover .p2{
            left: 100%;
        }
        .btn2 .p1{
            left: -100%;
        }
        .btn2 .p2{
            left: 0;
        }
        .content1{
            width: 250px;
            background-color: #e74c3c;
            transform: rotate(45deg);
        }
        /*.content1 .box{*/
            /*width: 150px;*/
            /*height: 150px;*/
        /*}*/
    </style>
</head>
<body>
    <div class="div-box">
        <div class="div-1"></div>
        <div class="div-2"></div>
    </div>
    <div class="test1">

    </div>
    <button class="btn" type="button">btn</button>
<div class="test3">
    <div class="out left left-out">范德萨发撒旦是范德萨发撒旦是范德萨发撒旦是范德萨发撒旦是</div>
    <div class="in left left-in">范德萨发撒旦是范德萨发撒旦是范德萨发撒旦是</div>
    <div class="center"></div>
    <div class="in right right-in">范德萨发撒旦是范德萨发撒旦是范德萨发撒旦是</div>
    <div class="out right right-out">范德萨发撒旦是范德萨发撒旦是范德萨发撒旦是范德萨发撒旦是</div>
</div>
<button class="btn1" type="button">btn1</button>
<div class="btn-box">
    <div class="my-btn">walking death</div>
</div>
<div class="btn2-box">
    <div class="btn2">
        <p class="p1">walking death</p>
        <p class="p2">walking death</p>
        <div class="btn-bg"></div>
    </div>
</div>

<div class="container">
    <div class="content1">
        <div class="box">123</div>
    </div>
</div>
</body>
<script async src="../script/jquery-1.11.2.min.js"></script>
<script>
    $('.btn').click(function(){
        $('.test1').addClass('test2');
    })
</script>
</html>